<template>
  <div>
    <Title :title="title"></Title>
    <div ref="chartContainer" style="height: 200px; margin-top: 15px;"></div>
  </div>
</template>

<script>
import { Area } from '@antv/g2plot';
import { get } from '@/utils/request';
import { mapState } from 'vuex';
import moment from 'moment';

export default {
  data() {
    return {
      title: '每小时平均温度和湿度',
      params: {
        page: 1,
        pageSize: 1000, // 增加数据量以确保获取足够数据
        startTime: moment().subtract(4, 'hours').format('YYYY-MM-DD HH:mm:ss'), // 近4小时数据
        endTime: moment().format('YYYY-MM-DD HH:mm:ss')
      },
      chartData: [],
      areaChart: null,
      chartConfig: {
        xField: 'hour',
        yField: 'value',
        seriesField: 'type',
        color: ['#5B8FF9', '#5AD8A6'],
        areaStyle: { fillOpacity: 0.6 },
        line: { size: 2 },
        point: { size: 3, shape: 'circle' },
        xAxis: {
          label: {
            autoRotate: true,
            style: { fill: 'black' },
            formatter: (val) => `${val}:00` // 显示为"小时:00"格式
          }
        },
        yAxis: {
          label: { style: { fill: 'black' } },
          label: {
            formatter: (val) => val
          }
        },
        tooltip: {
          shared: true,
          showCrosshairs: true,
          formatter: (datum) => {
            const unit = datum.type === 'temperature' ? '°C' : '%';
            return {
              name: datum.type === 'temperature' ? '温度' : '湿度',
              value: datum.value + unit
            };
          }
        },
        legend: {
          position: 'top',
          itemName: {
            style: { fill: 'black' },
            formatter: (text) => (text === 'temperature' ? '温度' : '湿度')
          }
        },
        animation: {
          appear: { animation: 'wave-in', duration: 2000 }
        }
      }
    };
  },
  computed: {
    ...mapState(['ed'])
  },
  watch: {
    ed: {
      handler(newVal) {
        if (newVal.device_id && newVal.engineer_id) {
          this.params.device_id = newVal.device_id;
          this.params.engineer_id = newVal.engineer_id;
          this.getChartData();
        }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    loadAreaChart() {
      if (this.areaChart) {
        this.areaChart.destroy();
      }
      this.areaChart = new Area(this.$refs.chartContainer, {
        ...this.chartConfig,
        data: this.chartData
      });
      this.areaChart.render();
    },
    async getChartData() {
      try {
        const res = await get('/dashboard/pageQueryData', this.params);
        if (res.data && res.data.list) {
          // 1. 获取所有数据并按小时分组
          const groupedData = this.groupDataByHour(res.data.list);
          
          // 2. 生成近4小时的时间数组（确保时间连续）
          const hourRange = this.generateLastNHours(4);
          
          // 3. 计算每小时的平均值，包括没有数据的小时
          const lastFourHoursData = this.calculateHourlyAveragesWithHourRange(groupedData, hourRange);
          
          this.chartData = lastFourHoursData;
          
          if (this.areaChart) {
            this.areaChart.changeData(this.chartData);
          } else {
            this.loadAreaChart();
          }
        }
      } catch (error) {
        console.error('获取温湿度数据失败:', error);
      }
    },
    
    // 按小时分组数据
    groupDataByHour(data) {
      const groupedData = {};
      data.forEach(item => {
        const hour = moment(item.insert_time).format('H'); // 获取小时部分(0-23)
        if (!groupedData[hour]) {
          groupedData[hour] = { temperature: [], humidity: [] };
        }
        if (item.temperature !== null && item.temperature !== undefined) {
          groupedData[hour].temperature.push(parseFloat(item.temperature) || 0);
        }
        if (item.humidity !== null && item.humidity !== undefined) {
          groupedData[hour].humidity.push(parseFloat(item.humidity) || 0);
        }
      });
      return groupedData;
    },
    
    // 生成最近N小时的时间数组（包括当前小时）
    generateLastNHours(n) {
      const hours = [];
      for (let i = n - 1; i >= 0; i--) {
        const hour = moment().subtract(i, 'hours').format('H');
        hours.push(hour);
      }
      return hours;
    },
    
    // 计算每小时的平均值，确保包含所有指定小时
    calculateHourlyAveragesWithHourRange(groupedData, hourRange) {
      const formattedData = [];
      
      hourRange.forEach(hour => {
        // 获取该小时的数据，如果没有则为空数组
        const hourData = groupedData[hour] || { temperature: [], humidity: [] };
        
        // 计算温度平均值
        const tempAvg = hourData.temperature.length > 0 
          ? this.calculateAverage(hourData.temperature) 
          : null;
        
        // 计算湿度平均值
        const humidityAvg = hourData.humidity.length > 0 
          ? this.calculateAverage(hourData.humidity) 
          : null;
        
        // 只有有数据时才添加到图表数据中
        if (tempAvg !== null) {
          formattedData.push({
            hour,
            type: 'temperature',
            value: Math.round(tempAvg * 10) / 10
          });
        }
        
        if (humidityAvg !== null) {
          formattedData.push({
            hour,
            type: 'humidity',
            value: Math.round(humidityAvg * 10) / 10
          });
        }
        
        // 如果某小时两种数据都没有，可以添加空数据点（可选）
        if (tempAvg === null && humidityAvg === null) {
          formattedData.push(
            { hour, type: 'temperature', value: null },
            { hour, type: 'humidity', value: null }
          );
        }
      });
      
      return formattedData;
    },
    
    calculateAverage(values) {
      const sum = values.reduce((a, b) => a + b, 0);
      return sum / values.length;
    }
  },
  mounted() {
    this.getChartData();
  },
  beforeDestroy() {
    if (this.areaChart) {
      this.areaChart.destroy();
    }
  }
};
</script>

<style lang="less" scoped>
/* 可以添加一些样式优化 */
</style>